var value = 1000
var l = $('.home .section2 .fix .position_img img').length
console.log(l)
var height = ((l) * value) + (200)
var h = document.documentElement.clientHeight + height
$('.section2').css('height',`${h}px`)

$('.home .section1 .rbox .box .c p').click(function () {
    var index = $(this).index()
    var off = ($('.section2').position().top + ((index) * value)) + (value/2)
    locomotive.scrollTo(off,{duration:1000});
})

let locomotive, scrollTop;
window.addEventListener('load', function () {
    if (document.querySelector('[data-scroll-container]')) {
        // locomotive = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true, lerp: 0.09, });
        locomotive.on('scroll', function (position) {
            scrollTop = position.scroll.y;
            WOW.init();

            var section2 = $('.section2').position().top
            var x = scrollTop - section2
            x >= height ? x = height : x
            if (scrollTop >= section2) {
                $('.section2 .fix').css('transform',`translateY(${x}px)`)
            }else if (scrollTop <= section2) {
                $('.section2 .fix').css('transform',`translateY(0px)`)
            }

            var transform_x = (scrollTop - section2)
            var index = Math.floor(transform_x / ((l*value) / l))
            index <= 0 ? index = 0 : index
            if (index<=l-1) {
                $('.home .section2 .fix .position_img img').removeClass('on').eq(index).addClass('on')

            }

            Pull.init({
                scrollTop: scrollTop,
                trigger: [
                    {
                        el: '.home .section2 .fix .content .matter:nth-child(1)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 0,
                        animate: value/2,
                    },
                    {
                        el: '.home .section2 .fix .content .matter:nth-child(1) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(2)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 1000,
                        animate: value/2,
                    },
                    {
                        el: '.home .section2 .fix .content .matter:nth-child(2) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 1500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(3)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 2000,
                        animate: value/2,
                    },
                    {
                        el: '.home .section2 .fix .content .matter:nth-child(3) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 2500,
                        animate: value/2,
                    },


                    {
                        el: '.home .section2 .fix .content .matter:nth-child(4)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 3000,
                        animate: value/2,
                    },
                    {
                        el: '.home .section2 .fix .content .matter:nth-child(4) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 3500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(5)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 4000,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(5) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 4500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(6)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 5000,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(6) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 5500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(7)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 6000,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(7) .joke',
                        el_start: '.section2',
                        opacity: [1,0],
                        y: [0,-50],
                        distance: 6500,
                        animate: value/2,
                    },

                    {
                        el: '.home .section2 .fix .content .matter:nth-child(8)',
                        el_start: '.section2',
                        opacity: [0,1],
                        y: [50,0],
                        distance: 7000,
                        animate: value/2,
                    },

                ]
            });
        });
    }
})

const Pull = {
    init({ scrollTop, trigger }) {
        let clientHeight = document.documentElement.clientHeight;
        trigger.forEach(({ el, el_start, auto, nostop , x, y, z, scale, opacity, borderRadius, distance, animate, ease}) => {
            distance === undefined ? distance = 0 : distance
            let data_view = $(el_start),
                startPosition = data_view.position().top + distance,
                t = (scrollTop - startPosition) / animate,
                x_start,
                y_start,
                z_start,
                scale_start,
                opacity_start,
                borderRadius_start

            x = getUndefined(x)
            y = getUndefined(y)
            z = getUndefined(z)

            scale === undefined ? scale = [1,1] : scale

            x_start = getStart(x,ease)
            y_start = getStart(y,ease)
            z_start = getStart(z,ease)
            scale_start = getStart(scale,ease)
            opacity_start = getStart(opacity,ease)
            borderRadius_start = getStart(borderRadius,ease)

            function getStart(q,ease){
                if (q) {
                    return q[0] + (ease ? easeOutQuad(t) :t) * (q[1]-q[0])
                }
            }

            function getUndefined(i) {
                return i === undefined ? i = [0,0] : i
            }

            function acquiesce() {
                if (scrollTop >= startPosition) {
                    $(el).css({
                        'transform': `translate3d(${x_start}px, ${y_start}px, ${z_start}px) scale(${scale_start})`,
                    });
                    if (borderRadius) {
                        $(el).css({
                            'border-radius': `${borderRadius_start}px`,
                        });
                    }
                    if (opacity) {
                        $(el).css({
                            'opacity' : opacity_start
                        });
                    }
                } else if (scrollTop <= startPosition + distance) {
                    $(el).css({
                        'transform': `translate3d(${x[0]}px, ${y[0]}px, ${z[0]}px) scale(${scale[0]})`,
                    });
                    if (borderRadius) {
                        $(el).css({
                            'border-radius': `${borderRadius[0]}px`,
                        });
                    }
                    if (opacity) {
                        $(el).css({
                            'opacity' : opacity[0]
                        });
                    }
                }

                if (scrollTop >= startPosition + animate) {
                    $(el).css({
                        'transform': `translate3d(${x[1]}px, ${y[1]}px, ${z[1]}px) scale(${scale[1]})`,
                    });
                    if (borderRadius) {
                        $(el).css({
                            'border-radius': `${borderRadius[1]}px`,
                        });
                    }
                    if (opacity) {
                        $(el).css({
                            'opacity' : opacity[1]
                        });
                    }
                }
            }

            function addition() {
                let y = scrollTop - data_view.position().top;
                let y_end = data_view.height() - clientHeight;

                if (!nostop) {
                    y = Math.min(y, y_end);
                }

                let translateY = scrollTop >= data_view.position().top ? y : '0';
                $(el).css({'transform': 'translate3d(0, '+ translateY +'px, 0)'});
            }

            !auto ? acquiesce() : addition()
        });
    }
};

function easeOutQuad(t) {
    return t * (2 - t);
}